<script lang="ts">
import { defineComponent, ref, reactive } from 'vue'
import { 
  HomeFilled,
  Menu as MenuIcon,
  User,
  Setting
} from '@element-plus/icons-vue'
import SideBar from "@/components/SideBar.vue";

interface RenderPoetObj {
  name: string;
  uuid?: string;
  dynasty?: string;
  author?: string;
  poetMessage?: string;
  sourceBook?: string;
  sourceBookTotalNum?: string;
  sourceBookDynasty?: string;
  sourceBookAuthor?: string;
  sourceBookType?: string;
  sourceBookNumber?: string;
  sourceBookMessage?: string;
}

export default defineComponent({
  name: 'MainPage',
  components: {
    HomeFilled,
    MenuIcon,
    User,
    Setting,
    SideBar
  },
  setup() {
    const activeKey = ref('1')
    const showPeopleFlag = ref<boolean>(true);
    const searchMessage = ref<string>("飞入菜花无处寻");
    const renderData = reactive<{ renderList: RenderPoetObj[] }>({
      renderList: [],
    });
    const searchType = ref("poetMessage");

    const searchTypeOptions = [
      {
        value: "name",
        label: "题名",
      },
      {
        value: "poetMessage",
        label: "诗词全文",
      },
      {
        value: "sourceBook",
        label: "来源古籍",
      },
      {
        value: "sourceBookAuthor",
        label: "古籍著者",
      },
      {
        value: "sourceBookType",
        label: "古籍版本",
      },
      {
        value: "sourceBookMessage",
        label: "内容",
      },
    ];

    const searchPoet = () => {
      console.log(searchMessage.value);
      showPeopleFlag.value = false;
    };

    return {
      activeKey,
      showPeopleFlag,
      searchMessage,
      renderData,
      searchType,
      searchTypeOptions,
      searchPoet
    }
  }
})
</script>

<template>
  <el-container class="main-layout">
    <el-header class="main-header">
      <h1>杨万里诗词鉴赏平台</h1>
    </el-header>
    <el-main class="main-content">
      <el-tabs v-model="activeKey" class="main-tabs">
        <el-tab-pane label="首页" name="1">
          <template #label>
            <el-icon><home-filled /></el-icon>
            <span>首页</span>
          </template>
          <div>
            <el-row>
              <el-col :span="4">
                <side-bar></side-bar>
              </el-col>
              <el-col :span="20">
                <el-main>
                  <h1>杨万里诗词鉴赏平台</h1>
                  <el-container>
                    <el-select
                      v-model="searchType"
                      placeholder="Select"
                      style="width: 240px"
                    >
                      <el-option
                        v-for="item in searchTypeOptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      />
                    </el-select>
                    <el-input v-model="searchMessage"></el-input>
                    <el-button color="blue" @click="searchPoet">搜索诗文</el-button>
                  </el-container>

                  <h6 v-if="showPeopleFlag">
                    杨万里，字廷秀，号诚斋，自号诚斋野客。吉州吉水（今江西省吉水县黄桥镇湴塘村）人。南宋文学家、官员，与陆游、尤袤、范成大并称为南宋"中兴四大诗人"。
                    杨万里早年多次拜他人为师。绍兴二十四年（1154年）举进士，授赣州司户参军。历任国子监博、漳州知州、吏部员外郎秘书监等。在朝廷中，杨万里是主战派人物。绍熙元年(1190年)，借焕章阁学士，为金朝贺正旦使接伴使。后出为江东转运副使、反对以铁钱行于江南诸郡，改知赣州，不赴，乞辞官而归，自此闲居乡里。开禧二年(1206年)卒于家中。
                    谥号文节。杨万里的诗自成一家，独具风格，形成对后世影响颇大的诚斋体。学江西诗派，后学陈师道之五律、王安石之七绝，又学晚唐诗。代表作有《插秧歌》《竹枝词》《小池》《初入淮河四绝句》等。其词清新自然，如其诗。赋有《浯溪赋》《海鱿赋》等。
                  </h6>
                  <div v-if="!showPeopleFlag">
                    <div>
                      <h3>搜索结果:</h3>
                      <div>
                        <el-table
                          :data="renderData?.renderList"
                          style="width: 100%"
                          height="400"
                        >
                          <el-table-column prop="name" label="题名" />
                          <el-table-column prop="dynasty" label="朝代" />
                          <el-table-column prop="author" label="著者" />
                          <el-table-column
                            prop="poetMessage"
                            label="诗词全文"
                            width="180"
                          />
                          <el-table-column prop="sourceBook" label="来源古籍" />
                          <el-table-column
                            prop="sourceBookTotalNum"
                            label="古籍总卷期"
                          />
                          <el-table-column prop="sourceBookDynasty" label="古籍朝代" />
                          <el-table-column prop="sourceBookAuthor" label="古籍著者" />
                          <el-table-column prop="sourceBookType" label="古籍版本" />
                          <el-table-column prop="sourceBookNumber" label="古籍分册" />
                          <el-table-column
                            prop="sourceBookMessage"
                            label="内容"
                            width="300"
                          />
                        </el-table>
                      </div>
                    </div>
                  </div>
                </el-main>
              </el-col>
            </el-row>
          </div>
        </el-tab-pane>

        <el-tab-pane name="2">
          <template #label>
            <el-icon><menu-icon /></el-icon>
            <span>功能</span>
          </template>
          <div>功能页面内容</div>
        </el-tab-pane>

        <el-tab-pane name="3">
          <template #label>
            <el-icon><user /></el-icon>
            <span>用户中心</span>
          </template>
          <div>用户中心内容</div>
        </el-tab-pane>

        <el-tab-pane name="4">
          <template #label>
            <el-icon><setting /></el-icon>
            <span>设置</span>
          </template>
          <div>设置页面内容</div>
        </el-tab-pane>
      </el-tabs>
    </el-main>
  </el-container>
</template>

<style scoped>
.main-layout {
  min-height: 100vh;
}

.main-header {
  background: #fff;
  padding: 0 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.main-header h1 {
  margin: 0;
  color: #409EFF;
  line-height: 60px;
}

.main-content {
  padding: 24px;
  background: #f5f7fa;
}

.main-tabs {
  background: #fff;
  padding: 24px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.el-tabs__item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.el-icon {
  margin-right: 4px;
}

:deep(.el-tabs__nav-wrap) {
  margin-bottom: 24px;
}

:deep(.el-tabs__item.is-active) {
  background: #ecf5ff;
  border-radius: 4px;
  padding: 0 16px;
}
</style>
